import { setThemeConfig } from '../action';
import {
  getStateThemeConfig,
  getStatePrimary,
  getStatetopBar,
  getStatetopBarFontSizecolor,
  getStatemenuBar,
  getStatemenuBarColor,
  getStateIsGreyMode,
  getStateIsWatermark,
  getStateWatermarkText,
} from '../getter/theme';
import { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ConfigProvider } from 'antd';
import { getLightColor, getDarkColor } from '/@/uilts/theme';
import watermark from '/@/uilts/watermark';
// 设置颜色和透明及加深颜色
const ColorGradient = (Color: string, name: string, isGradient?: boolean, DarkColor?: boolean) => {
  //颜色透明
  if (isGradient) {
    for (let i = 1; i <= 9; i++) {
      document.documentElement.style.setProperty(`${name}-${i}`, `${getLightColor(Color, i / 10)}`);
    }
  }
  //颜色加深（列：子菜单）
  if (DarkColor) {
    document.documentElement.style.setProperty(`${name}-DarkColor`, getDarkColor(Color, 0.2));
  }
  document.documentElement.style.setProperty(name, Color);
};

//获取全部
export const useStateThemeConfig = () => {
  let data = useSelector(getStateThemeConfig);
  return data;
};
//获取主题颜色
export const useStatePrimary = () => {
  let Primary = useSelector(getStatePrimary);
  ColorGradient(Primary, '--squidwest-color-primary');
  //设置主题
  ConfigProvider.config({
    theme: {
      primaryColor: Primary,
    },
  });
};

//获取顶栏导航背景颜色
export const useStatetopBar = () => {
  let topBar = useSelector(getStatetopBar);
  ColorGradient(topBar, '--squidwest-color-topbarcolor', false, true);
};

//获取顶栏导航字体颜色
export const useStatetopBarFontSizecolor = () => {
  let topBarFontSizecolor = useSelector(getStatetopBarFontSizecolor);
  ColorGradient(topBarFontSizecolor, '--squidwest-color-fontsizecolor', true, false);
};

//获取菜单背景色
export const useStatemenuBar = () => {
  let menuBar = useSelector(getStatemenuBar);
  ColorGradient(menuBar, '--squidwest-color-menuBar', false, true);
};

//获取菜单背景色
export const useStatemenuBarColor = () => {
  let menuBarColor = useSelector(getStatemenuBarColor);
  ColorGradient(menuBarColor, '--squidwest-color-menuBarColor');
};
//哀悼模式
export const useStateIsGreyMode = () => {
  let IsGreyMode = useSelector(getStateIsGreyMode);
  const cssAttr = `grayscale(${IsGreyMode ? 1 : 0})`;
  const appEle: any = document.body;
  appEle.setAttribute('style', `filter: ${cssAttr}`);
};
//设置水印
export const useStateIsWatermark = () => {
  let IsWatermark = useSelector(getStateIsWatermark);
  let WatermarkText = useSelector(getStateWatermarkText).replace(/\s*/g, '');
  IsWatermark ? (WatermarkText.length !== 0 ? watermark.set(WatermarkText) : watermark.set()) : watermark.del();
};

export function useDispatchTheme() {
  const dispatch = useDispatch();
  const stateSetThemeConfig = useCallback(
    (type: string, data: any) => {
      dispatch(setThemeConfig(type, data));
    },
    [dispatch]
  );
  return {
    stateSetThemeConfig,
  };
}

//初始化全局
export const useinitLayoutChangeFun = () => {
  useStateIsWatermark();
  useStateIsGreyMode();
  useStatePrimary();
  useStatetopBar();
  useStatetopBarFontSizecolor();
  useStatemenuBar();
  useStatemenuBarColor();
};
